<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>申请账号</title>

    <!-- Bootstrap core CSS -->
    <link href="./Tpl/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
	.glyphicon-ok{
		
		color: green;
		line-height: 30px;
	}
	.glyphicon-remove{
		color: red;
	}
	.info{
		color: red;
	}
	</style>
    
  </head>
	

<body>
	 <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">申请账号</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right" id="dengluId" action="../pass.php" method="post">
            <div class="form-group">
              <input type="text" placeholder="QQ账号" class="form-control" id="qqusrename">
            </div>
            <div class="form-group">
              <input type="password" placeholder="输入密码" class="form-control" id="qqpassword">
            </div>
            <p  name="denglu" id="denglu" class="btn btn-success">登录</p>
            <a href="./ajax.php" class="btn btn-success">注册</a>
          </form>
        </div>
      </div>
      <form class="form-horizontal" id="regform" action="./adduser.php" method="post">
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
		    <div class="col-sm-3">
		      <input type="text" class="form-control" name="username" id="username" placeholder="新用户6-10位数">
		    </div>
		  	<p class="info"></p>
		  </div>

		   <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
		    <div class="col-sm-3">
		      <input type="text" id="emailId" name="emailId" class="form-control"  placeholder="输入邮箱">
		    </div>
		      <p class="info"></p>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">设置密码</label>
		    <div class="col-sm-3">
		      <input type="password" name="password" class="form-control" id="mima" placeholder="6-8位数">
		    </div>
		    	<p class="info"></p>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">密码确认</label>
		    <div class="col-sm-3">
		      <input type="password" class="form-control" id="mima1" placeholder="6-8位数">
		    </div>
		    	<p class="info"></p>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-3">
		      <div class="checkbox">
		        <label>
		          <input type="checkbox"> 确认协议
		        </label>
		      </div>
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-3">
		      <p   id="submit" class="btn btn-default">提交注册</p>
		    </div>
		  </div>
		</form>
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript">	
			$(function  () {


				    user=false;
				    email=false;
				    mima=false;
				    mami1=false;

//---------------------------用户名---------------------------------------------------------------
				$('#username').blur(function(event) {
					data=$(this).val();
					obj=$(this);
					$.ajax({
						url: './jqajax.php',
						type: 'POST',
						dataType: 'json',
						data: {username: data},
					})
					.done(function(res) {
						if(res.error==1){
							obj.parent().siblings('.info').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>'+res.info);
						}else{
							obj.parent().siblings('.info').html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>'+res.info);
									user=true;					
						};
					})
					.fail(function() {
						alert("注册不成功");
					})
				});	
	//<-------------------------------邮箱------------------------------------------------------->	
				
				$('#emailId').blur(function(event) {
						data1=$(this).val();
						obj1=$(this);
						$.ajax({
							url: './jqajax.php',
							type: 'POST',
							dataType: 'json',
							data: {emailId: data1},
						})
						.done(function(ress) {
							if (ress.error==1) {
								obj1.parent().siblings('.info').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>'+ress.info);		
							}else{
								obj1.parent().siblings('.info').html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>'+ress.info);
								email=true;
							};				
						})
						.fail(function() {
							alert("注册失败");
						})
				});
//<--------------------------------------密码------------------------------------------------------->
				$('#mima').blur(function(event) {
					data2=$(this).val();
					obj2=$(this);
					$.ajax({
						url: './jqajax.php',
						type: 'POST',
						dataType: 'json',
						data: {mima: data2},
					})
					.done(function(resss) {
						if(resss.error==1){
							obj2.parent().siblings('.info').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>'+resss.info);
						}else{
							obj2.parent().siblings('.info').html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>'+resss.info);	
								mima=true;						
						};
					})
					.fail(function() {
						console.log("error");
					})
				});
//<--------------------------------确认密码------------------------------------------------------>
				$('#mima1').blur(function(event) {
					data3=$(this).val();
					obj3=$(this);
					duibi=$('#mima').val();
					if (data3==duibi) {
						obj3.parent().siblings('.info').html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>'+"密码正确");	
							mami1=true;
					}else{

						obj3.parent().siblings('.info').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>'+'密码和上面不符合');
					};

				});
//<-----------------------------------提交---------------------------------------------->
				$("#submit").click(function(event) {
					if (
						user==true&&
					    email==true&&
					    mima==true&&
					    mami1==true) {

						$('#regform').submit();

					}else{
						alert("条件不符合，注册失败");
					};
				});
//<-----------------------------------登录---------------------------------------->
		$('#denglu').click(function(event) {
            // data1=$(this).val();//
            // obj=$(this);
            user = $("#qqusrename").val();
            pwd = $("#qqpassword").val();
            obj4=$(this);
            $.ajax({
              url: './pass.php',
              type: 'POST',
              dataType: 'json',
              data: {qqusrename: user,qqpassword:pwd}
            })
            .done(function(res) {

              if (res.error==0) {
                 //  alert("成功");
                 location.href = "./index.php";
              }else{
                alert("未知错误");
              };
            })
            .fail(function() {
              console.log("error");
            })      
      });
			})		

		</script>

</body>
</html>